import { reqAddHospitalSet, reqGetHospitalSetById, reqUpdateHospitalSet } from '@/api/hospital/hospitalSet'
import { ReqAddHospitalSetParams } from '@/api/hospital/hospitalSet/model/hospitalSetTypes'
import { Button, Card, Form, Input, Space, message } from 'antd'
import React, { useState, useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom';
export default function AddOrUpdateHospitalSet() {
  //声明一个状态
  let [loading, setLoading] = useState<boolean>(false);
  //1. 获取 form 对象
  let [form] = Form.useForm();
  //调用 useNavigate 获取 navigate 函数
  let navigate = useNavigate();
  //获取当前修改医院的 id
  let { id } = useParams();
  //发送请求获取当前 id 的医院数据
  useEffect(() => {
    //判断 如果是新增操作, 则没有必要也不应该发送后边的请求
    if (!id) return;
    //获取医院的信息
    let getData = async () => {
      //请求获取医院的数据
      let result = await reqGetHospitalSetById(id as string);
      //将请求回来的数据, 设置到表单中
      form.setFieldsValue(result);
    }

    getData();
  }, []);

  //声明函数
  let finish = async (values: ReqAddHospitalSetParams) => {
    //更新 loading 状态
    setLoading(true);
    try {
      //新增
      if (!id) {
        //发送请求
        await reqAddHospitalSet(values);
        //成功提醒
        message.success('新增成功');
      } else {
        //更新操作
        await reqUpdateHospitalSet({ ...values, id: id as string });
        message.success('更新成功');
      }
    } catch (e) {
      setLoading(false);
    }
    setLoading(false);
  }
  //声明返回的回调函数
  let back = () => {
    navigate(-1);
  }


  return (
    <Card>
      <Form
        //2. 为 Form 组件设置 form 属性
        form={form}
        onFinish={finish}
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '医院名称不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '医院编号不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="API基础路径"
          name="apiUrl"
          rules={[{ required: true, message: 'API 路径不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: '手机号不能为空' },
            { pattern: /^1\d{10}$/, message: '手机号格式不正确' }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Space>
            <Button loading={loading} type="primary" htmlType="submit">
              {id ? '更新' : '新增'}
            </Button>

            <Button onClick={back}>
              返回
            </Button>
          </Space>
        </Form.Item>
      </Form>

    </Card>
  )
}
